<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .main-uploadimg {
            margin-bottom: 24px;
        }

        .main-uploadimg>ul {
            float: left;
            margin-left: 12px;
        }

        .main-uploadimg>ul>li>div {
            float: left;
        }

        .main-uploadimg>ul>li>div>input {
            display: none;
        }

        .main-uploadimg>ul>li>div>img {
            width: 90px;
            height: 90px;
        }

        .main-uploadimg>ul>li>div.newImage {
            border: 1px solid #e8e8e8;
        }
    </style>
</head>

<body>
    <div class="main-uploadimg clearfix">
        <h4>上传图片</h4>
        <ul class="clearfix">
            <li class="imgContant">
                <div class="upload-notice">
                    <label for="uploadimg" class="uploadimg">
                        <img src="./upload.png" alt="">
                    </label>
                    <input id="uploadimg" type="file" name="image" accept=“image/*”>
                    <!-- <input id="uploadimg" type="file" name="image" accept=“image/*” onchange='handleInputChange(this)'> -->
                    <!-- <input type="file" name="file1" id="uploadimg" accept="image/*" onchange="cnm(this)"> -->
                </div>
            </li>
        </ul>
    </div>
    <script src="./jquery-3.3.1.js"></script>
    <script>
        $(function () {
            uploadImg()
            // 上传图片
            function uploadImg() {
                console.log(1111111)
                $('.main-uploadimg').on('change', '.upload-notice', function () {
                    // 获取input
                    var inputFile = $('#uploadimg').get(0)
                    // 存放图片的父元素
                    var imgContant = $('.imgContant')
                    // 获取的图片弄文件
                    var fileList = inputFile.files;
                    var imgArr = [];
                    var imgLength = $('.imgContant .newImage').length
                    if (imgLength > 5) {
                        $('.mask-layer').fadeIn(1000).fadeOut(1000)
                        $('.mask-layer').html('最多上传6张图片')
                        return
                    }
                    for (var i = 0; i < fileList.length; i++) {
                        var file = document.getElementById('uploadimg').files[i]
                        var reader = new FileReader();
                        var imgSize = file.size;
                        if (imgSize > (1024 * 1024 * 4)) {
                            $('.mask-layer').fadeIn(1000).fadeOut(1000)
                            $('.mask-layer').html('上传图片大小必须小于4M')
                            return;
                        }
                        reader.readAsDataURL(file);
                        reader.onload = function (e) {
                            let img = new Image();
                            img.src = this.result;
                            // var imgBox = document.createElement("img");
                            // img.setAttribute("src", img.src);
                            var imgAdd = $("<div></div>");
                            imgAdd.addClass('newImage')
                            imgAdd.append(img);
                            imgContant.prepend(imgAdd);

                            // imgAdd.on('click', function () {
                            //     $(this).remove()
                            // })
                        };
                    };
                })
            }

        })
    </script>
</body>

</html>